import { useState, useEffect } from 'react';
import styles from './index.less';
// import { Button } from 'antd';
import jQuery from 'jquery';
import { connect } from 'dva';
import { timeout, getPluginLocal } from '@/utils/utils';
import { Button, Modal, Menu, Dropdown } from 'antd';

const $ = jQuery;
let dqurl = ''; //当前url
const { path } = getPluginLocal();

/**
 * 嵌入组件 B站视频详情页组件
 */
const BiliDetail_Embed = (props) => {
  const { model, dispatch } = props;

  const [dqVideo, setDqVideo] = useState(null); //当前视频信息
  const [isShow, setisShow] = useState(false);
  const [keys, setKeys] = useState([]); //网课类型列表

  //打开创建网课类型弹框
  const collection = () => {
    setisShow(true);
  };
  //收藏视频信息到专栏
  const collectionVideo = (type) => {
    if (dqVideo) {
      dispatch({
        type: 'draftModel/add',
        payload: { dqVideo, type },
      });
    }
  };

  //创建收藏类型弹框
  const ok = () => {
    cancel();
  };
  //关闭收藏类型弹框
  const cancel = () => {
    setisShow(false);
  };

  //网课类型列表
  const menu = (
    <Menu>
      {keys.map((key) => {
        return (
          <Menu.Item key={key} onClick={() => collectionVideo(key)}>
            {key}
          </Menu.Item>
        );
      })}
    </Menu>
  );

  //跳转到我的网课页
  const goMyOnlineClass = () => {
    window.location.href = path + 'index.html#/myOnlineClass';
    // window.open(path + 'index.html#/myOnlineClass');
  };

  useEffect(async () => {
    //获取网课收藏列表
    await dispatch({
      type: 'draftModel/getCollectionList',
    });
    await changeUrl();
    dqurl = location.href;
    //整个页面点击事件
    $('#app').on('click', async (e) => {
      await changeUrl();
    });
    $(window).on('popstate', async () => {
      await changeUrl();
    });
    //每5秒一次事件
    // setInterval(() => {
    //   changeUrl();
    // }, 1000 * 5);
  }, []);

  useEffect(() => {
    if (Object.keys(model.data).length === 0) return;
    setKeys(Object.keys(model.data));
  }, [model.data]);

  //页面地址改变触发
  const changeUrl = async () => {
    await timeout(1000);
    if (dqurl !== location.href) {
      //判断地址是否变了
      dqurl = location.href;
      if (location.host === 'm.bilibili.com') {
        //移动端
        const { video } = window.__INITIAL_STATE__;
        const { bvid, p, viewInfo } = video;
        const { title, pic, desc, duration, owner, videos } = viewInfo;
        console.log('标题', title);
        setDqVideo({ bvid, p, title, pic, desc, duration, owner, videos }); //拿到页面的数据
        isCollection(bvid, p);
        return;
      } else {
        //pc端
        const { bvid, p, videoData } = window.__INITIAL_STATE__;
        const { title, pic, desc, duration, owner, videos } = videoData;
        console.log('标题', title);
        setDqVideo({ bvid, p, title, pic, desc, duration, owner, videos }); //拿到页面的数据
        isCollection(bvid, p);
        return;
      }
    }
  };

  //验证当前bvid是否已收藏 若未收藏则展示收藏按钮 已收藏则跳去收藏的分p
  const isCollection = (bvid, p) => {
    dispatch({
      type: 'draftModel/isCollection',
      payload: { bvid, p },
    });
  };

  return (
    <div
      className={`${styles.BiliDetail_Embed} ${
        location.host === 'm.bilibili.com' && styles.mobile
      }`}
    >
      {model.isCollection ? (
        <div className={`${styles.collection} ${styles.haveSC}`}>
          <span className="has-charge">已收藏</span>
        </div>
      ) : (
        <Dropdown overlay={menu} placement="bottomLeft">
          <div className={`${styles.collection}`} onClick={collection}>
            <span className="has-charge">
              <i className="van-icon-general_addto_s"></i>
              收藏到网课
            </span>
          </div>
        </Dropdown>
      )}
      <a
        target="_blank"
        href={path + 'index.html#/myOnlineClass'}
        className={`${styles.collection} ${styles.goMyOnlineClass}`}
        // onClick={goMyOnlineClass}
      >
        去我的网课学习
      </a>
      <Modal title="新增网课类型" visible={isShow} onOk={ok} onCancel={cancel}>
        <p>网课类型！</p>
      </Modal>
    </div>
  );
};

export default connect(({ draftModel, loading }) => ({
  model: draftModel,
  loading,
}))(BiliDetail_Embed);
